<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
//创建性能检测器需要组件
import Stats from 'three/addons/libs/stats.module.js'

let scene, camera, renderer, controls, sta
function init () {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 8;
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}



// 创建球体
const createSphere = () => {
  // three.js所有网格物体（面）都是又三角形组成
  // 任何图形都能用三角形表示
  //参数1：球体的半径
  //参数2：水平方向的分段数(分几个坐标点)
  //参数3：垂直方向分段数
  const geometry = new THREE.SphereGeometry(1, 32, 16);
  // const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });//纯色球

  //注意：非基础材质都受到光照影响，表现得颜色需要和光照的颜色+强度进行综合计算

  //没光是黑色 下面函数创建光
  const material = new THREE.MeshStandardMaterial({
    color: 0xffff00
  })
  const sphere = new THREE.Mesh(geometry, material);
  scene.add(sphere);
}

//目标：创建地面
function createFloor () {
  //因为地面是矩形  所以创建一个矩形平面 
  const geometry = new THREE.PlaneGeometry(10, 10);
  //side决定物体那一面渲染
  const material = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.DoubleSide }); //, side: THREE.DoubleSide
  const plane = new THREE.Mesh(geometry, material);
  scene.add(plane);
  plane.rotation.x = -Math.PI / 2
  plane.position.y = -1

}

//目标：点光源(灯泡)
function createLight () {
  console.log(1111)
  //参数1：光源颜色；参数2：光照强度；参数3：光最远距离
  const pointLight = new THREE.PointLight(0xff0000, 1, 100)
  console.log(pointLight)
  pointLight.position.set(3, 3, 3)
  console.log(pointLight)
  scene.add(pointLight)

  //点光源辅助对象
  const pointLightHelper = new THREE.PointLightHelper(pointLight, 1)
  scene.add(pointLightHelper)
}


//创建一个坐标轴
function createAxes () {
  //参数：坐标轴长度
  const axesHelper = new THREE.AxesHelper(5)
  //坐标轴也是一个物体需要加入到场景中使用(特殊)
  //物体虽然试几何图形+材质皮肤决定，坐标轴构造函数里决定好线段图形和颜色
  scene.add(axesHelper)
}




//适配画布大小
function resize () {
  window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight)
    //重新根据响应改变物体的宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    //更新摄像机矩阵空间(让摄像机重新计算每个像素点位置和大小)
    camera.updateProjectionMatrix()
  })
}


//创建性能检测器
function createStats () {
  sta = new Stats()
  //设置监测器面板类型(0,1,2):0每秒刷新帧数；1每帧用时；2内存占用
  sta.setMode(0)
  sta.domElement.style.position = 'fixed'
  sta.domElement.style.top = '0'
  sta.domElement.style.left = '0'
  //设置监测器位置并添加DOM
  document.body.appendChild(sta.domElement)
  //注意：需要在animate中不断更新状态数值
}

//创建轨道控制器
//轨道控制器（控制摄像机位置 ）
function createOrbit () {
  controls = new OrbitControls(camera, renderer.domElement)
  controls.update()
}
function animate () {
  requestAnimationFrame(animate)
  controls.update();
  sta.update()
  renderer.render(scene, camera)
}

// 调用初始化
init()
//调用坐标轴
createAxes()
//调用性能监测器
createStats()
//调用监听函数
resize()

//调用球
createSphere()
//调用光源
createFloor()
//调用环境光
createLight()
//调用轨道控制器
createOrbit()
//渲染器
animate()
//三者关系是将场景和摄像机传给渲染器
renderer.render(scene, camera)


</script>

<template></template>

<style scoped>
</style>
